import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { isAuth } from '../../utils/auth'


/*
    在components目录中创建AuthRoute/index.js 文件
    创建组件AuthRoute并导出
    在AuthRoute组件中返回Route组件（在Route基础上做了一层包装，用于实现自定义功能）
    给Route组件，添加render方法，指定改组件要渲染的内容（类似与component属性）
    在render方法中，调用isAuth() 判断是否登陆
    如果登陆了，就渲染当前组件（通过参数component获取到要渲染的组件，需要重命名）
    如果没有登陆，就重定向到登陆页面，并且指定登陆成功后腰跳转的页面路径
    将AuthRoute组件接收到的props原样传递给Route组件（保证与Route组件使用方式相同）
    使用AuthRoute组件配置路由规则，验证是否实现页面的登陆访问控制
*/

//创建组件AuthRoute并导出
export default ({ component: Component, ...rest }) => {
    //在AuthRoute组件中返回Route组件（在Route基础上做了一层包装，用于实现自定义功能）
    return <Route
        {...rest}
        //给Route组件，添加render方法，指定改组件要渲染的内容（类似与component属性）
        render={props => {
            //在render方法中，调用isAuth() 判断是否登陆
            if (isAuth()) {
                //如果登陆了，就渲染当前组件（通过参数component获取到要渲染的组件，需要重命名）
                //将 props 传递给组件，组件中才能获取到路由相关信息
                return <Component {...props} />
            } else {
                //如果没有登陆，就重定向到登陆页面，并且指定登陆成功后腰跳转的页面路径
                return <Redirect
                    to={{
                        pathname: '/login',
                        state: {
                            from: props.location
                        }
                    }}
                />
            }
        }}
    />
}
